<template>
  <el-dialog 
    ref="templateSel"
    :visible="showAddTemplateDialog" 
    @close="close" 
    title="选择模版"
    width="500px"
  >
  <el-checkbox v-model="selectAll" @change="selectAllOptions">全选</el-checkbox>
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox v-for="(option, index) in options" :key="index" :label="option">
        {{ option }}
      </el-checkbox>
    </el-checkbox-group>
        <!-- 按钮 -->
    <el-row type="flex" justify="center" style="margin-top: 40px;">
      <el-col :span="12">
        <el-button size="mini" type="primary" @click="btnOK">确定</el-button>
        <el-button size="mini" @click="close">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
  
</template>
<script>
import { getTemplateNames, addSelectionTemplate } from '@/api/employee'
  export default {
    props: {
      showAddTemplateDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        selectAll: false,
        selectedOptions: [],
        options:[]
      };
    },
    methods: {
      getNames() {
        this.getTemplateNames()
      },
      selectAllOptions() {
        if (this.selectAll) {
          this.selectedOptions = this.options.slice(); // 全选时选择所有选项
        } else {
          this.selectedOptions = []; // 取消全选时清空选择
        }
      },
      close() {
        this.selectAll = false
        this.selectedOptions = []
        this.$emit('update:showAddTemplateDialog', false)
      },
      async getTemplateNames() {
        this.options = await getTemplateNames()
      },
      // 点击确定时调用
      async btnOK() {
        const formData = new FormData();
        formData.append("selectionId", this.$parent.selectionId);
        this.selectedOptions.forEach((name) => {
          formData.append("templateNames", name);
        });
        // 有个分发的操作
        await addSelectionTemplate(formData)
        // 通知父组件更新
        this.$emit('alertInfo')
        // 提示消息
        this.close()
      }
    }
  };
</script>